<template>
	<view class="container">
		<view class="header">
			<view class="title">入党申请书</view>
			<view class="subtitle">查看用户提交的所有入党申请书</view>
		</view>

		<view class="apply-list">
			<view v-if="loading" class="loading">
				<uni-load-more status="loading" />
			</view>
			<view v-else-if="applyList.length === 0" class="empty">
				<text>暂无入党申请书</text>
			</view>
			<view v-else>
				<view v-for="(item, index) in applyList" :key="index" class="apply-card">
					<view class="apply-header" @click="toggleExpand(index)">
						<view class="apply-info">
							<view class="apply-title">
								<text class="title-text">入党申请书</text>
								<text
									:class="['status-tag', getStatusClass(item.status)]">{{ getStatusText(item.status) }}</text>
							</view>
							<view class="apply-time">提交时间：{{ item.createTime }}</view>
						</view>
						<view class="expand-icon" :class="{ 'expanded': item.isExpanded }">
							<image src="/static/center4/right.png" mode="aspectFit"></image>
						</view>
					</view>

					<view class="apply-detail" v-if="item.isExpanded">
						<view class="detail-item">
							<text class="label">申请编号：</text>
							<text class="value">{{ item.id }}</text>
						</view>
						<view class="detail-item">
							<text class="label">提交时间：</text>
							<text class="value">{{ item.createTime }}</text>
						</view>
						<view class="detail-item">
							<text class="label">审核时间：</text>
							<text class="value">{{ item.reviewTime || '暂无' }}</text>
						</view>
						<view class="detail-item">
							<text class="label">审核意见：</text>
							<text class="value">{{ item.review || '暂无' }}</text>
						</view>
						<view class="detail-item">
							<text class="label">申请书文件：</text>
							<view class="file-preview" @click="previewFile(item.handwrittenDoc)">
								<text class="file-name">{{ item.fileName || '查看文件' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		get
	} from '@/common/js/request';
	import { onLoad } from '@dcloudio/uni-app'

	const loading = ref(true);
	const applyList = ref([]);
	const userId = ref();

	// 格式化时间
	const formatTime = (timeStr) => {
		if (!timeStr) return '';
		return timeStr.replace('T', ' ');
	};

	// 获取入党申请书列表
	const getApplyList = async () => {
		try {
			loading.value = true;

			const res = await get('/party/application/select?id=' + userId.value);
			applyList.value = res.data.partyApplications.map(item => ({
				...item,
				isExpanded: false,
				createTime: formatTime(item.createTime),
				reviewTime: formatTime(item.reviewTime)
			}));
		} catch (error) {
			console.error('获取入党申请书列表失败:', error);
			uni.showToast({
				title: '获取入党申请书列表失败',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};

	// 切换展开状态
	const toggleExpand = (index) => {
		applyList.value[index].isExpanded = !applyList.value[index].isExpanded;
	};

	// 获取状态样式类
	const getStatusClass = (status) => {
		const statusMap = {
			0: 'status-pending',
			1: 'status-approved',
			2: 'status-rejected'
		};
		return statusMap[status] || 'status-pending';
	};

	// 获取状态文本
	const getStatusText = (status) => {
		const statusMap = {
			0: '待审核',
			1: '已通过',
			2: '未通过'
		};
		return statusMap[status] || '待审核';
	};

	// 预览文件
	const previewFile = (fileUrl) => {
		if (!fileUrl) {
			uni.showToast({
				title: '文件不存在',
				icon: 'none'
			});
			return;
		}

		// 处理多个文件URL
		const fileUrls = fileUrl.split(',');
		if (fileUrls.length === 0) {
			uni.showToast({
				title: '文件不存在',
				icon: 'none'
			});
			return;
		}

		// 处理第一个文件的URL
		const processedUrl = fileUrls[0].replace('//file/', '/file/');

		// 根据文件类型选择预览方式
		const fileType = processedUrl.split('.').pop().toLowerCase();
		console.log(fileType);
		if (['pdf', 'doc', 'docx'].includes(fileType)) {
			// 打开文件预览
			uni.downloadFile({
				url: processedUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.openDocument({
							filePath: res.tempFilePath,
							success: () => {
								console.log('打开文档成功');
							},
							fail: () => {
								uni.showToast({
									title: '打开文件失败',
									icon: 'none'
								});
							}
						});
					}
				},
				fail: () => {
					uni.showToast({
						title: '下载文件失败',
						icon: 'none'
					});
				}
			});
		} else {
			uni.showToast({
				title: '不支持的文件格式',
				icon: 'none'
			});
		}
	};

	onLoad((option) => {
		console.log(option);
		userId.value = option.id;
		getApplyList();
	});

</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #f5f7fa;
		padding: 20rpx;
	}

	.header {
		padding: 30rpx 20rpx;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}

		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	.apply-list {
		padding: 20rpx 0;
	}

	.apply-card {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.apply-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid #f5f5f5;

			.apply-info {
				flex: 1;

				.apply-title {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.title-text {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-right: 20rpx;
					}

					.status-tag {
						padding: 4rpx 16rpx;
						border-radius: 20rpx;
						font-size: 24rpx;

						&.status-pending {
							background-color: #e6f7ff;
							color: #1890ff;
						}

						&.status-approved {
							background-color: #f6ffed;
							color: #52c41a;
						}

						&.status-rejected {
							background-color: #fff2f0;
							color: #ff4d4f;
						}
					}
				}

				.apply-time {
					font-size: 26rpx;
					color: #999;
				}
			}

			.expand-icon {
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.3s ease;

				&.expanded {
					transform: rotate(90deg);
				}

				image {
					width: 32rpx;
					height: 32rpx;
					opacity: 0.5;
				}
			}
		}

		.apply-detail {
			padding: 30rpx;
			background-color: #fafafa;

			.detail-item {
				display: flex;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.label {
					font-size: 28rpx;
					color: #666;
					width: 160rpx;
					flex-shrink: 0;
				}

				.value {
					font-size: 28rpx;
					color: #333;
					flex: 1;
				}

				.file-preview {
					display: flex;
					align-items: center;
					background-color: #fff;
					padding: 16rpx 24rpx;
					border-radius: 8rpx;
					border: 2rpx solid #f0f0f0;

					.file-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					.file-name {
						font-size: 28rpx;
						color: #1890ff;
					}
				}
			}
		}
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		color: #999;
		font-size: 28rpx;
	}
</style>